<script setup>
// import { reactive, ref, watch, watchEffect } from 'vue';

    /**
     * watch()用法
     */
    const count = ref(1)
    watch(count, (newValue, oldValue) => {
        console.log(newValue, oldValue)
    })

    const user = reactive({
        name: 'tom',
        age: 18
    })
    watch(user, (newValue, oldValue) => {
        console.log(newValue, oldValue)
    }) // 自动启用深度监听


    /**
     * watchEffect()用法
     */
    const flag = ref(true)
    watchEffect(() => {
        console.log(flag.value)
        console.log(user.name)
    })

</script>

<template>  
    <p>{{ count }}</p>
    <button @click="count++">修改count</button>
    <hr>

    <p>{{ user.name }}</p>
    <button @click="user.name = 'alice'">修改user.name</button>
    <hr>

    <p>{{ flag }}</p>
    <button @click="flag=!flag">修改flag</button>
</template>

<style scoped>

</style>